<template>
  <div class="hometop-wrapper">
    <div class="hometop-top">
      <div class="homtop-top-left">本周热门榜单</div>
      <div class="homtop-top-right">全部榜单&nbsp;></div>
    </div>
    <div class="homtop-content">
      <swiper :options="swiperOption" class="hometop-swiper">
        <swiper-slide class="marginringht-0" v-for="(item, index) in topList" :key="item.id">
          <img
            v-if="index < 3"
            :src="
              index === 0 ? '/static/images/top1.png' :
              (index === 1 ? '/static/images/top2.png':
              (index === 2 ? '/static/images/top3.png': ''))"
            alt=""
            class="topimg"
          >
          <img class="hometop-img" :src="item.imgUrl" :alt="item.info">
          <h3>{{ item.info }}</h3>
          <p><span>￥{{ item.pay }}</span>起</p>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeTop',
  props: {
    topList: Array
  },
  data () {
    return {
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 30
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .hometop-swiper >>> .marginringht-0 {
    margin-right: .1rem!important
  }
  .hometop-wrapper
    margin: 0.15rem 0
    background-color: #fff

    .hometop-top
      height: 0.94rem
      line-height: 0.94rem
      padding: 0 0.2rem

      .homtop-top-left
        float: left
        font-size: 0.32rem
        font-weight: bold

      .homtop-top-right
        float: right
  .hometop-swiper
    padding-left: .2rem
    text-align: center
    padding-bottom: .2rem
    font-size: .26rem
    .marginringht-0
      position: relative
      .topimg
        position: absolute
        top: -.02rem
        left: 0
        width: .9rem
    .hometop-img
      width: 2rem
      height: 2rem
      margin-bottom: .2rem
    h3
      padding-bottom: .1rem
    span
      color: #FF9F39

</style>
